<template>
  <je-modal
    v-model:visible="visibleModule"
    width="460px"
    height="auto"
    class="serve-configuration"
    :title="$t('ServeConfiguration.title')"
    :resize="false"
    :maximizable="false"
    cancel-button
    :ok-button="addModule"
    @close="cancelModal"
  >
    <je-form layout="vertical" autocomplete="off">
      <je-form-item
        :label="$t('ServeConfiguration.beanName')"
        v-bind="validateInfos.resourceName"
        name="resourceName"
      >
        <je-input v-model:value.trim="formState.resourceName" />
      </je-form-item>
      <je-form-item
        :label="$t('ServeConfiguration.beanMethod')"
        v-bind="validateInfos.methodName"
        name="methodName"
      >
        <je-input v-model:value.trim="formState.methodName" />
      </je-form-item>
    </je-form>
  </je-modal>
</template>
<script>
  import { defineComponent, watch, ref, reactive } from 'vue';
  import { Input, Modal, Form } from '@jecloud/ui';
  import { verifyData } from '@/helper/common';
  import { isNotEmpty } from '@jecloud/utils';

  const useForm = Form.useForm;
  export default defineComponent({
    name: 'ServeConfiguration',
    components: {
      JeModal: Modal,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
    },
    props: {
      checkedRow: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    emits: ['closeModal'],
    setup(props, { emit }) {
      //保存模块数据，关闭弹窗
      const visibleModule = ref(true);
      const formState = reactive({
        resourceName: props.checkedRow.resourceName,
        methodName: props.checkedRow.methodName,
      });
      const rulesRef = reactive({
        resourceName: [verifyData.required],
        methodName: [verifyData.required],
      });
      const { resetFields, validate, validateInfos } = useForm(formState, rulesRef, {
        onValidate: (...args) => {},
      });

      //监听父组件传过来的值
      const parentRow = ref(props.checkedRow);

      const addModule = ({ $modal, button }) => {
        //保存数据逻辑
        validate()
          .then(() => {
            parentRow.value.methodName = formState.methodName;
            parentRow.value.name = formState.resourceName;
            parentRow.value.resourceName = formState.resourceName;
            emit('closeModal');
            $modal.close();
          })
          .catch((error) => {});
        return false;
      };
      const cancelModal = () => {
        emit('closeModal');
      };
      return {
        validateInfos,
        resetFields,
        addModule,
        visibleModule,
        formState,
        cancelModal,
      };
    },
  });
</script>

<style lang="less">
  .serve-configuration {
    .ant-col.ant-form-item-control {
      min-height: auto !important;
    }
  }
</style>
